import { useState, useRef, useCallback } from 'react';
import useMemoizedFn from './use-memoized-fn';
import useUpdate from './use-update';

function usePropsValue(options) {
  const { value, defaultValue, onChange } = options;

  // 创建一个更新标记，通常 useUpdate 钩子会返回一个函数来触发组件的重新渲染
  const update = useUpdate();

  // 使用 useRef 来持有状态值，这样我们可以在不触发重新渲染的情况下更新它
  // 如果传入了 value，则使用 value，否则使用 defaultValue
  const stateRef = useRef(value !== undefined ? value : defaultValue);
  if (value !== undefined) {
    stateRef.current = value;
  }

  // 使用 useMemoizedFn 来创建一个记忆化的 setState 函数
  // 这个函数接受一个新的值（或者一个返回新值的函数）和一个可选的 forceTrigger 标志
  const setState = useMemoizedFn((v, forceTrigger) => {
    // 如果 v 是一个函数，则调用它并传入当前的状态值来获取下一个值
    // 否则，直接使用 v 作为下一个值
    let nextValue = typeof v === 'function' ? v(stateRef.current) : v;

    // 如果 forceTrigger 为 false 且 nextValue 与当前状态值相同，则不执行任何操作
    if (!forceTrigger && nextValue === stateRef.current) return;

    // 更新状态值
    stateRef.current = nextValue;

    // 触发更新
    update();

    // 如果提供了 onChange 回调，则调用它并传入新的状态值
    if (onChange) onChange(nextValue);
  });

  // 返回当前状态值和 setState 函数作为一个数组
  return [stateRef.current, setState];
}

export default usePropsValue;
